<template>
    <div class="orderlist">
        <div class="order" v-for="(item,index) in orderList" :key="index" v-if="orderList.length!=0">
            <p class="data">
              <span>{{item.orderDate}}</span>
               <span v-if="item.orderStatus=='01'" class="ft">待支付</span>
               <span v-if="item.orderStatus=='02'" class="ft">已付款</span>
               <span v-if="item.orderStatus=='03'" class="ft">已完成</span>
            </p>
            <div class="con" v-for="(itemchild,indexchild) in item.orderDetailProductList" :key="indexchild">
                <div class="conc">
                  <img :src="itemchild.productImg" alt="">
                  <div class="text">
                    <div>
                      <p>{{itemchild.productName | sliceString(15)}}</p>
                      <p></p>
                    </div>
                    <div>
                       <p>{{itemchild.salePrice}}元</p>
                       <p>x{{itemchild.buyNumber}}</p>
                    </div>
                     <div>
                      <p>
                        <span v-for="(itemchilds,indexchilds) in itemchild.orderDetailsSpecList " :key="indexchilds">
                          {{itemchilds.specName}}
                        </span>
                      </p>
                       <p></p>
                    </div>
                  </div>
                </div>
            </div>
            <p class="total">合计:￥{{item.payAmount}}</p>
            <div class="button">
              <div v-if="item.orderStatus=='01'"><p @click="orderCancel(item)">取消订单</p><p @click="paynow(item)">立即支付</p> <p class="d" @click="goorderdeta(item)">订单详情</p></div>
              <div v-if="item.orderStatus=='02'"><p @click="payfirm(item)">确认收货</p> <p class="d"  @click="goorderdeta(item)">订单详情</p></div>
              <div v-if="item.orderStatus=='03'"><p  @click="goorderdeta(item)">订单详情</p></div>
            </div>
        </div>
         <div class="nodata" v-if="orderList.length==0">
           <img src="./../../assets/myoder.png" alt="">
           <p class="fontcolor">一个订单都没有...</p>
         </div>
        <div style="width:100%;height:50px"></div>
    </div>
</template>
<script>
// 01 未支付 02 已付款 03 确认收货
import {Toast, MessageBox } from 'mint-ui';
import {formats} from "src/methods/synchronous.js";
import {orderCancel,confirmReceipt,queryOrderList,integralExchangeProduct,hkbOrderpay} from 'src/methods/request.js';
export default {
  data() {
    return {
      orderList: [],
      route:{},
      orderStatus:"",
      thisfirm:{},
      popupVisible:true
    };
  },
  computed:{
    imgUrl(){
      return this.$store._modules.root._children.a.state
    }
  },
  created(){
      this.route = Object.assign({}, this.$route);
      this.getproductlist()
  },
  methods:{
      //获取订单
        getproductlist(){
          this.$vux.loading.show({
             text: 'Loading'
              })
           queryOrderList({orderType:"01"}).then(
               response => {
                   this.$vux.loading.hide()
                 if(response.rspCode == "0000"){
                      this.orderList = Object.assign([], response.data.orderList)
                    // 图片加域名
                        for( var item of this.orderList){
                          item.orderDate= formats(item.orderDate)
                          for(var items of item.orderDetailProductList){
                            items.productImg = this.imgUrl+items.productImg;
                          }
                        }
                 }else{
                        MessageBox('', '查询失败');
                 }
                   
               }
            ).catch(
              error => console.log(error)
            );
            setTimeout(() => {
              this.$vux.loading.hide()
            }, 2000)
        },
        //取消订单
        orderCancel(item){
          orderCancel({orderNo:item.orderNo}).then(res=>{
            if(res.data.resultCode=='00'){
              MessageBox('',"取消成功");
              this.getproductlist();
            }else{
              MessageBox('', res.data.resultMesg||'支付失败');
            }
           
          })
        },
        //立即支付
        paynow(item){
          var self = this;
          if(item.payType == '04'){
                this.$router.push({
                      path:"/hkbPayfrom",
                      query:{ orderNo:item.orderNo }
                })
          }else if(item.payType == '02'){
                integralExchangeProduct({orderNo:item.orderNo}).then(
                    response => {
                      if(response.rspCode=="0000"){
                           if(response.data.resultCode=="00"){
                             self.getproductlist();
                             MessageBox('', response.rspMsg||'支付成功');
                           }else if(response.data.resultCode=="04"){
                              self.getproductlist();
                               window.open(response.data.content,"_self")
                          }else{
                                 MessageBox('', response.data.resultMesg||'支付失败');
                           }
                          }else{
                                MessageBox('', response.rspMsg||'支付失败');
                            }
                           }).catch(
                              error => console.log(error)
                           );
                  }
            },
        //订单详情查询
        goorderdeta(item){
            this.$router.push({
                    path:"/orderMoneyDetail",
                    query:{
                      orderNo:item.orderNo
                      }
            })
          // 1-实物2-彩票3-券
          // if(item.orderDetailProductList[0].productType==1){
          //   //跳转实物详情
          //   this.$router.push({
          //        path:"/orderMoneyDetail",
          //        query:{
          //          orderNo:item.orderNo
          //         }
          //   })
          // }else if(item.productType==3){
          //   //券详情
          //     this.$router.push({
          //        path:"/orderIntergraDetail",
          //        query:{
          //          orderNo:item.orderNo
          //          }
          //   })
          // }
        },
        //确认收货
        payfirm(item){
          // console.log(item)
              // 发送请求
              confirmReceipt({orderNo: item.orderNo}).then(
                response => {
                let rep = Object.assign({},response)
                if(rep.rspCode=="0000"){
                   MessageBox('',"收货成功");
                  this.getproductlist()
                }else{

                }
                }
              ).catch(
                error => console.log(error)
              );
        }
  },
   watch: {
    route() {
      if (this.route.path == "/Myorder") {
        this.getproductlist();
      }
    }
  }

}
</script>
<style lang="less" scoped>
    .orderlist{
      padding-top: 4rem;
      box-sizing: border-box;
      position: absolute;
      top: 0px;
      bottom:0px;
      width: 100%;
      min-height: 35rem;
      background-color:#f1f2f3;
   
      .order{
         background-color: #fff;
        //  height: 15rem;
         margin-top: 10px;
         padding: 0 10px 0 10px;
         box-sizing: border-box;
         p.data{
            height: 3.2rem;
            line-height: 3.2rem;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgb(241, 240, 240);
            .ft{
              color: #ED6E36;
            }
         }
         div.con{
            text-align: left;
            height: 7rem;
            border-bottom: 1px solid rgb(241, 240, 240);
              .conc{
                padding-top: 0.1rem;
                box-sizing: border-box;
                height: 6.8rem;
                width: 100%;
                display: flex;
                align-items:center;
                 img{
                    width: 7rem;
                    height:5.8rem;
                    border-radius: 7px;
                  }
                .text{
                   font-size: 14px;
                   padding-left: 10px;
                   width: 75%;
                  div{
                    display: flex;
                    justify-content: space-between;
                    height:1.8rem;
                    line-height: 1.8rem;
                  }
                 }

              }
              .r{
                width: 100%;
                height: 2rem;
                line-height: 2rem;
                text-align: right;
              }
         }
         p.total{
           height: 3rem;
           line-height: 3rem;
           text-align: right;
           border-bottom: 1px solid rgb(241, 240, 240);
         }
         div.button{
            div{
              height: 4.3rem;
              line-height: 4.3rem;
              text-align: right;
              display: flex;
              align-items:center;
              justify-content: flex-end;
            }
            p{
              width: 7rem;
              height: 2.5rem;
              line-height: 2.5rem;  
              text-align: center;
              margin-left: 10px;
              border-radius: 7px;
              color:#ED6E36;
              border: 1px solid #ED6E36;
            }
            .d{
              color:black;
              border: 1px solid rgb(197, 197, 197);
            }
         }
      }
      .nodata{
        margin-top:20%;
        font-size: 18px;
        .fontcolor{
          color:#c8c8c8;
        }
        img{
          width:50%;
        }
      }
    }
    .orderlist::-webkit-scrollbar {
    display: none;
}
</style>


